<template>
  <div class="cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} x {{ product.quantity }}
      </li>
    </ul>
    <p>总价：{{ totalPrice }}元</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['getProducts', 'getTotalPrice']),
    products() {
      return this.getProducts
    },
    totalPrice() {
      return this.getTotalPrice
    }
  }
}
</script>

<style scoped>
.cart {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>